<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css"  media="all">
</head>
<body>


	<div class="layuimini-container">
		<div class="layuimini-main">

			<fieldset class="table-search-fieldset">
				<legend>搜索信息</legend>
				<div style="margin: 10px 10px 10px 10px">

					<div class="layui-form-item" style="margin-top: 20px;"
						onsubmit="false">
						<label class="layui-form-label">姓名</label>
						<div class="layui-input-inline" style="width: 120px;">
							<input type="text" name="name" id="name"
								class="layui-input">
						</div>
						
						
						<button class="layui-btn layui-btn-primary" id="search"
							data-type="reload">
							<i class="layui-icon"></i> 搜 索
						</button>
					</div>




				</div>
			</fieldset>
	<table class="layui-hide" id="test" lay-filter="test"></table>
	<script type="textml" id="toolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="addUser">添加<tton>
			</div>
		</script>
	<script type="textml" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
		</div>
	</div>
</body>
<script src="layui/layui.js" charset="utf-8"></script>
	<script>
		layui.use('table', function() {
			var table = layui.table;
			var $ = layui.jquery;
			table.render({
				elem : '#test',
				toolbar : '#toolbarDemo',
				page:'true',
				url : '/getAllStu',
				method : 'POST',
				cols : [ [ {
					field : 'id',
					title : '编号',
					width : 100,
				}, {
					field : 'name',
					title : '学生姓名',
					width : 100,
				}, {
					field : 'studentid',
					title : '卡号',
					width : 100,
				},{
					field : 'sex',
					title : '性别',
					width : 100,
				},{
					field : 'state',
					title : '状态',
					width : 100,
				},{
					title : '操作',
					width : 180,
					toolbar : '#barDemo'
				} ] ],
				id : 'testReload'
			});
			
			//查询
			$('#search').on('click', function() {								
								var name = $("#name").val();		
								table.reload('testReload', {//testReload,是上面渲染表格的id
									where : {//接口需要的两个请求参数
									'name' : name
									}
								});
							});

			table.on('toolbar(test)', function(obj) { 
				switch (obj.event) {
				case 'addUser':
					layer.open({
						type : 2,
						area : [ '500px', '400px' ],
						content : 'Student_add.html',
						title : '添加',
						end : function() {
							window.location.reload();
						}
					});
					break;
				}
				;
			});
			table.on('tool(test)', function(obj) {
				if (obj.event === 'del') {
					layer.confirm('真的删除行么', function(index) {
						$.post("/del", {
							"id" : obj.data.id,
							method : 'del'
						}, function(data) {
							if (data.count > 0) {
								console.log('删除成功');
								window.location.reload();
							} else {
								alert('不能删除！');
								window.location.reload();
							}
						}, "json");
					});
				} else if (obj.event === 'edit') {
					console.log(obj.data);
					layer.open({
						type : 2,
						area : [ '500px', '400px' ],
						content : 'Student_update.html',
						title : '编辑',
						success : function(layero, index) {
							var body = layer.getChildFrame('body', index);
							body.contents().find("#id").val(obj.data.id);
							body.contents().find("#name").val(obj.data.name);
							body.contents().find("#studentid").val(obj.data.studentid);
							body.contents().find("#state").val(obj.data.state);
							
						},
						end : function() { 
							window.location.reload();
						}
					});
				}
			});
		});
	</script>
</html>